/*
 * @Description: 
 * @version: 1.0
 * @Author: 赵卓轩
 * @Date: 2021-10-23 00:12:36
 * @LastEditors: 赵卓轩
 * @LastEditTime: 2021-10-24 00:05:20
 */
import React, { useCallback, useState } from "react";
import { Menu } from 'antd';
import {
    AppstoreOutlined,
    PieChartOutlined,
    DesktopOutlined,
    ContainerOutlined,
    MailOutlined,
} from '@ant-design/icons';
import style from './style.css';
import Camera from './camera/index';
import AnimalAdmin from './animalAdmin/index';


const { SubMenu } = Menu;

export default () => {
    const [collapsed, setCollapsed] = useState(true);
    const [current, setCurrent] = useState('camera');

    const selectMenu = (e: any) => {
        setCurrent(e.key);
    }

    const component = useCallback(() => {
        switch(current) {
            case 'camera':
                return <Camera/>;
            case 'animalAdmin':
                return <AnimalAdmin/>;
        }
    },[current])();

    return (
        <div className={style.container}>
            <Menu
                defaultSelectedKeys={['2']}
                defaultOpenKeys={['sub1']}
                mode="inline"
                theme="dark"
                inlineCollapsed={collapsed}
                onClick={selectMenu}
                style={{ position: 'fixed', right: 0, bottom: '2em' ,zIndex: 99 }}
            >
                <Menu.Item key="first" icon={<PieChartOutlined />}>
                    Option 1
                </Menu.Item>
                <Menu.Item key="camera" icon={<DesktopOutlined />}>
                    实时监控
                </Menu.Item>
                <Menu.Item key="animalAdmin" icon={<ContainerOutlined />}>
                    动物管理
                </Menu.Item>
                <Menu.Item key="fouth" icon={<MailOutlined />}>
                    Option 4
                </Menu.Item>
                <SubMenu key="sub2" icon={<AppstoreOutlined />} title="Navigation Two">
                    <Menu.Item key="subsub1">Option 9</Menu.Item>
                    <Menu.Item key="subsub2">Option 10</Menu.Item>
                    <SubMenu key="sub3" title="Submenu">
                        <Menu.Item key="subsub11">Option 11</Menu.Item>
                        <Menu.Item key="subsub12">Option 12</Menu.Item>
                    </SubMenu>
                </SubMenu>
            </Menu>
            <div className={style.content}>
                {component}
            </div>
        </div>
    )
}